<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" name="username" @blur="getUsername" v-model="form.username">

			<!--radio-->
			<input type="radio" name="sex" value="m" v-model="form.sex">男
			<input type="radio" name="sex" value="w" v-model="form.sex">女

			<!--select-->
			<select name="sel" v-model="form.city">
				<option value="1">北京</option>
				<option value="2">上海</option>
				<option value="3">广州</option>
			</select>

			<!--checkbox-->
			<input type="checkbox" name="hobby[]" value="1" v-model="form.hobby" />足球
			<input type="checkbox" name="hobby[]" value="2" v-model="form.hobby" />篮球
			<input type="checkbox" name="hobby[]" value="3" v-model="form.hobby" />游戏
			<input type="checkbox" name="hobby[]" value="4" v-model="form.hobby" />读书
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					//表单的值类型必须是String类型
					form: {
						username: "zhangsan1",
						sex: "m",
						city: "2",
						hobby: ["1", "3", "2"]
					}
				},
				methods: {
					getUsername() {
						//用户名称 不能重复
						console.log(this.form.username);
					}
				}
			})
		</script>

	</body>
</html>
